﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tabs</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
</head>
<body>
    
    

    <div style="position:absolute;left:100px;top:50px;">
        <input id="left" type="button" value="Ajax tooltip" data-url="data.txt" data-placement="right"/>       
    </div>



</body>
</html>
<script>

var tip = new mini.ToolTip();
tip.set({
    target: document,
    selector: '[data-tooltip], [title], [data-url]',
    onbeforeopen: function (e) {
        e.cancel = false;
    },
    onopen: function (e) {
        var el = e.element;
        var url = $(el).attr("data-url");
        if (url) {
            this.showLoading();
            $.ajax({
                url: url,
                success: function (text) {
                    //模拟网络延迟
                    setTimeout(function () {
                        tip.setContent(text);
                    }, 1000);
                }
            });
        }
    }
});

</script>